v <template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">目标任务查看</h2>
            </div>
        </el-card>
        <br />
        <el-container>
            <el-aside width="300px" style="height: 100vh">
                <el-card>
                    <!--年度查询-->
                    <el-select v-model="value" filterable @change="searchWorkOfTargetYear">
                        <el-option
                            v-for="yearTargetOption in yearTargetOptions"
                            :key="yearTargetOption.value"
                            :label="yearTargetOption.label"
                            :value="yearTargetOption.value"
                        >
                        </el-option>
                    </el-select>

                    <div style="margin-top: 10px">
                        <el-select v-model="departmentValue" filterable style="width: 100px" @change="getDepartmentLabel">
                            <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                        <!-- <el-button type="primary" style="float: right">查看</el-button> -->
                    </div>
                </el-card>

                <el-menu>
                    <el-menu-item index="1" @click="clickA">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{ label }} A类</span>
                    </el-menu-item>

                    <div class="menu-buttom" v-show="sideA">
                        <!-- <el-tree :data="taskDataA" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
                        <div class="menu-buttom">
                            <div v-for="(content, i) in taskDataA" :key="i" class="el-tree-style">
                                <div>
                                    <!--任务名称-->
                                    <span class="el-tree-node__label">{{ content.name }}</span>
                                    <div>
                                        <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                        <!--任务接受部门-->
                                        <span class="el-tree-node__label menu-click" @click="TaskInfoShow(i, 'A')">
                                            <span v-if="content.acceptDeptId == departmentLabel" style="color: red">
                                                {{ content.acceptDeptId }}
                                            </span>
                                            <span v-else>
                                                {{ content.acceptDeptId }}
                                            </span>
                                            <!-- <div  style="color: red">
                                                {{content.acceptDeptId}}
                                            </div> -->
                                        </span>
                                        <el-tag v-if="content.level == 0">一级</el-tag>
                                        <el-tag type="success" v-if="content.level == 1">二级</el-tag>
                                        <el-tag type="warning" v-if="content.level == 2">三级</el-tag>
                                        <div style="margin-top: 5px" v-for="(content2, j) in content.children" :key="j">
                                            <!--二级部门-->
                                            <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                            &ensp;&ensp;<span class="el-tree-node__label menu-click" @click="TaskInfoShowLevel2(i, j, 'A')">
                                                <span v-if="content2.acceptDeptId == departmentLabel" style="color: red">
                                                    {{ content2.acceptDeptId }}
                                                </span>
                                                <span v-else>
                                                    {{ content2.acceptDeptId }}
                                                </span>
                                            </span>
                                            <el-tag v-if="content2.level == 0">一级</el-tag>
                                            <el-tag type="success" v-if="content2.level == 1">二级</el-tag>
                                            <el-tag type="warning" v-if="content2.level == 2">三级</el-tag>
                                            <div style="margin-top: 5px" v-for="(content3, n) in content2.children" :key="n">
                                                <!--二级部门-->
                                                <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                                &ensp;&ensp;<span class="el-tree-node__label menu-click">
                                                    <span v-if="content3.acceptDeptId == departmentLabel" style="color: red">
                                                        {{ content3.acceptDeptId }}
                                                    </span>
                                                    <span v-else>
                                                        {{ content3.acceptDeptId }}
                                                    </span>
                                                </span>
                                                <el-tag v-if="content3.level == 0">一级</el-tag>
                                                <el-tag type="success" v-if="content3.level == 1">二级</el-tag>
                                                <el-tag type="warning" v-if="content3.level == 2">三级</el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                    <el-menu-item index="2" @click="clickB">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{ label }} B类</span>
                    </el-menu-item>
                    <div class="menu-buttom" v-show="sideB">
                        <!-- <el-tree :data="taskDataA" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
                        <div class="menu-buttom">
                            <div v-for="(content, i) in taskDataB" :key="i" class="el-tree-style">
                                <div>
                                    <!--任务名称-->
                                    <span class="el-tree-node__label">{{ content.name }}</span>
                                    <div>
                                        <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                        <!--任务接受部门-->
                                        <span class="el-tree-node__label menu-click" @click="TaskInfoShow(i, 'B')">
                                            <span v-if="content.acceptDeptId == departmentLabel" style="color: red">
                                                {{ content.acceptDeptId }}
                                            </span>
                                            <span v-else>
                                                {{ content.acceptDeptId }}
                                            </span>
                                        </span>
                                        <el-tag v-if="content.level == 0">一级</el-tag>
                                        <el-tag type="success" v-if="content.level == 1">二级</el-tag>
                                        <el-tag type="warning" v-if="content.level == 2">三级</el-tag>
                                        <div style="margin-top: 5px" v-for="(content2, j) in content.children" :key="j">
                                            <!--二级部门-->
                                            <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                            &ensp;&ensp;<span class="el-tree-node__label menu-click">
                                                <span v-if="content2.acceptDeptId == departmentLabel" style="color: red">
                                                    {{ content2.acceptDeptId }}
                                                </span>
                                                <span v-else>
                                                    {{ content2.acceptDeptId }}
                                                </span></span
                                            >
                                            <el-tag v-if="content2.level == 0">一级</el-tag>
                                            <el-tag type="success" v-if="content2.level == 1">二级</el-tag>
                                            <el-tag type="warning" v-if="content2.level == 2">三级</el-tag>
                                            <div style="margin-top: 5px" v-for="(content3, n) in content2.children" :key="n">
                                                <!--二级部门-->
                                                <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                                &ensp;&ensp;<span class="el-tree-node__label menu-click">
                                                    <span v-if="content3.acceptDeptId == departmentLabel" style="color: red">
                                                        {{ content3.acceptDeptId }}
                                                    </span>
                                                    <span v-else>
                                                        {{ content3.acceptDeptId }}
                                                    </span></span
                                                >
                                                <el-tag v-if="content3.level == 0">一级</el-tag>
                                                <el-tag type="success" v-if="content3.level == 1">二级</el-tag>
                                                <el-tag type="warning" v-if="content3.level == 2">三级</el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                    <el-menu-item index="3" @click="clickC">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{ label }} C类</span>
                    </el-menu-item>
                    <div class="menu-buttom" v-show="sideC">
                        <!-- <el-tree :data="taskDataA" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
                        <div class="menu-buttom">
                            <div v-for="(content, i) in taskDataC" :key="i" class="el-tree-style">
                                <div>
                                    <!--任务名称-->
                                    <span class="el-tree-node__label">{{ content.name }}</span>
                                    <div>
                                        <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                        <!--任务接受部门-->
                                        <span class="el-tree-node__label menu-click" @click="TaskInfoShow(i, 'C')">{{
                                            content.acceptDeptId
                                        }}</span>
                                        <el-tag v-if="content.level == 0">一级</el-tag>
                                        <el-tag type="success" v-if="content.level == 1">二级</el-tag>
                                        <el-tag type="warning" v-if="content.level == 2">三级</el-tag>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                    </div>
                </el-menu>
            </el-aside>
            <el-main style="padding-top: 0">
                <Tab
                    :taskInfos="taskInfo"
                    :targetYear="childYear"
                    :workInfo_view="workInfo_view"
                    :allocatWork_view="allocatWork_view"
                    :issueWrok_view="issueWrok_view"
                ></Tab>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import yearTargetApi from '../../../../api/yearTagetApi';
import workOfYearTargetApi from '../../../../api/workOfYearTargetApi';
import Tab from './TabBsearch.vue';
import work from '../../../../api/work';
export default {
    components: {
        Tab
    },
    data() {
        return {
            workInfo_view: true,
            allocatWork_view: true,
            issueWrok_view: true,
            value: '',
            label: '',
            taskDataA: [],
            taskDataB: [],
            taskDataC: [],
            sideA: false,
            sideB: false,
            sideC: false,
            taskInfo: {},
            // 子组件年份
            childYear: '',
            // 部门选项
            departmentOptions: [],
            // 选择部门的值，默认所有，为空
            departmentValue: '',
            departmentLabel: '',

            assignWorkData: [],
            assigntaskDataA: [],
            activeName: 'first',
            data: [],

            yearTargetOptions: [],

            // 点击部门显示,
            clickElse: true,
            //控制显示
            TabViewControl: false
        };
    },
    methods: {
        // 点击年度目标任务A所有
        async clickA() {
            this.sideA = true;
            this.sideB = false;
            this.sideC = false;
            this.workInfo_view = true;
            this.allocatWork_view = true;
            this.issueWrok_view = true;
            if (this.departmentValue == '') {
                await workOfYearTargetApi.getWorkOfYearTarget(this.value, 0).then((res) => {
                    this.taskDataA = res.data;
                    console.log(this.taskDataA);
                    this.taskDataA = this.toTree(this.taskDataA);
                });
            } else {
                console.log(this.departmentLabel);
                await workOfYearTargetApi.getWorkOfYearTarget(this.value, 0).then((res) => {
                    this.taskDataA = [];
                    let temp = res.data;
                    temp = this.toTree(temp);
                    for (let i = 0; i < temp.length; ++i) {
                        if (temp[i].acceptDeptId == this.departmentLabel) {
                            this.taskDataA.push(temp[i]);
                        } else {
                            for (let j = 0; j < temp[i].children.length; ++j) {
                                if (temp[i].children[j].acceptDeptId == this.departmentLabel) {
                                    this.taskDataA.push(temp[i]);
                                } else {
                                    for (let n = 0; n < temp[i].children[j].length; ++n) {
                                        if (temp[i].children[j].children[n].acceptDeptId == this.departmentLabel) {
                                            this.taskDataA.push(temp[i]);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    this.taskDataA = [...new Set(this.taskDataA)];
                });
            }
        },
        // 点击年度目标任务B所有
        async clickB() {
            this.sideA = false;
            this.sideB = true;
            this.sideC = false;
            this.workInfo_view = true;
            this.allocatWork_view = true;
            this.issueWrok_view = true;
            await workOfYearTargetApi.getWorkOfYearTarget(this.value, 1).then((res) => {
                this.taskDataB = res.data;
                console.log(res.data);
                this.taskDataB = this.toTree1(this.taskDataB);
            });
        },
        // 点击年度目标任务C所有
        async clickC() {
            this.sideA = false;
            this.sideB = false;
            this.sideC = true;
            this.workInfo_view = true;
            this.allocatWork_view = false;
            this.issueWrok_view = true;
            await workOfYearTargetApi.getWorkOfYearTarget(this.value, 2).then((res) => {
                this.taskDataC = res.data;
                this.taskDataC = this.toTree(this.taskDataC);
            });
        },
        // 获取具体的任务信息
        TaskInfoShow(i, type) {
            if (type == 'A') {
                this.taskInfo = this.taskDataA[i];
                this.childYear = this.label;
            }
            if (type == 'B') {
                this.taskInfo = this.taskDataB[i];
                this.childYear = this.label;
            }
            if (type == 'C') {
                this.taskInfo = this.taskDataC[i];
                this.childYear = this.label;
            }
        },
        TaskInfoShowLevel2(i, j, type) {
            this.taskInfo = this.taskDataA[i].children[j];
            this.childYear = this.label;
        },
        searchWorkOfTargetYear() {
            this.getLabel();
        },
        //——————————————————————————————————————————————————————————————————————————
        // 根据value 获取当前的label的值
        getLabel() {
            let obj = {};
            obj = this.yearTargetOptions.find((item) => {
                return item.value == this.value;
            });
            this.label = obj.label;
        },
        getDepartmentLabel() {
            let obj1 = {};
            obj1 = this.departmentOptions.find((item) => {
                return item.value == this.departmentValue;
            });
            this.departmentLabel = obj1.label;
        },
        //获取年份
        async getTargetYear() {
            await yearTargetApi.findAll().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.yearTargetOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.value = this.yearTargetOptions[0].value;
                this.label = this.yearTargetOptions[0].label;
                // 强制刷新 解决有数据不渲染的问题

                this.$forceUpdate();
            });
        },
        // 获取部门信息
        getDepartments() {
            this.$store.dispatch('getDepartment');
            let obj1 = this.$store.state.department.department;
            for (let j = 0; j < obj1.length; ++j) {
                this.departmentOptions[j] = {
                    value: obj1[j].id,
                    label: obj1[j].name
                };
            }
            this.departmentOptions.unshift({
                value: '',
                label: '全部'
            });
            // 强制刷新 解决有数据不渲染的问题
            this.$forceUpdate();
        },
        toTree(param) {
            //没有父节点的数据
            let parents = param.filter((value) => value.level == 0);

            //有父节点的数据
            let children = param.filter(
                (value) => value.parentId !== 'undefined' && value.parentId != null && (value.level == 1 || value.level == 2)
            );
            //定义转换方法的具体实现
            let translator = (parents, children) => {
                //遍历父节点数据
                parents.forEach((parent) => {
                    //遍历子节点数据
                    children.forEach((current, index) => {
                        //此时找到父节点对应的一个子节点
                        if (current.parentId === parent.id) {
                            //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                            let temp = JSON.parse(JSON.stringify(children));
                            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                            temp.splice(index, 1);
                            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                            translator([current], temp);
                            //把找到子节点放入父节点的children属性中
                            typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current]);
                        }
                    });
                });
            };
            //调用转换方法
            translator(parents, children);
            //返回最终的结果
            return parents;
        },
        toTree1(param) {
            //没有父节点的数据
            let parents = param.filter((value) => value.level == 1);

            //有父节点的数据
            let children = param.filter(
                (value) => value.parentId !== 'undefined' && value.parentId != null && (value.level == 1 || value.level == 2)
            );
            //定义转换方法的具体实现
            let translator = (parents, children) => {
                //遍历父节点数据
                parents.forEach((parent) => {
                    //遍历子节点数据
                    children.forEach((current, index) => {
                        //此时找到父节点对应的一个子节点
                        if (current.parentId === parent.id) {
                            //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                            let temp = JSON.parse(JSON.stringify(children));
                            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                            temp.splice(index, 1);
                            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                            translator([current], temp);
                            //把找到子节点放入父节点的children属性中
                            typeof parent.children !== 'undefined' ? parent.children.push(current) : (parent.children = [current]);
                        }
                    });
                });
            };
            //调用转换方法
            translator(parents, children);
            //返回最终的结果
            return parents;
        }
    },
    created() {
        this.getTargetYear();
        this.getDepartments();
    }
};
</script>

<style scoped>
.el-tree-style {
    padding: 0px 40px;
}
.el-tree-node__label {
    color: #606266;
}
.el-tag {
    float: right;
}
div /deep/ .el-input.is-disabled .el-input__inner {
    color: #000;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.el-menu-item.is-active {
    color: #409eff;
}
.menu-buttom {
    padding-bottom: 20px;
}
.menu-click {
    cursor: pointer;
}
</style>